<template>
  <div class="prod-detail">
    <i class="el-icon-back goBack" @click="$router.go(-1)"></i>
    <img :src="detailData.picture" />
    <div class="prod-detail-cont">
      <div class="description">
        <h1 class="title">{{ detailData.title }}</h1>
        <div class="cont">
          <div v-for="(s, i) in detailData.content" :key="i">
            <p v-show="s.width == 0">{{ s.data }}</p>
            <img :src="s.data" v-show="s.width !== 0" class="imgs" />
          </div>
        </div>
      </div>
    </div>
    <div class="prod-detail-bottom">
      <div class="inner">
        <a class="javacript:;" @click="save"
          ><img
            src="../../../../assets/imgs/blackstar.png"
            v-show="!favourite"/>
          <img src="../../../../assets/imgs/orangesatr.png" v-show="favourite"
        /></a>

        <a :href="contactUs"
          ><img src="../../../../assets/imgs/contact.png" style="margin-top:1px"
        /></a>
        <div class="rightBtns">
          <a :href="sampleApplication"
            ><el-button type="text">{{
              $t("vr.sampleApplication")
            }}</el-button></a
          >
          <a :href="visitWebsite"
            ><el-button type="text">{{ $t("vr.visitWebsite") }}</el-button></a
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import api from "servicePath/index"
import { mapState, mapMutations } from "vuex"
export default {
  data () {
    return {
      contactUs: "https://www.covestro.com/zh-cn/contact",
      visitWebsite: "https://www.covestro.com/zh-cn/",
      sampleApplication: "https://solutions.covestro.com/zh/account/register",
      detailData: {},
      favourite: false
    }
  },
  mounted () {
    if (!this.userInfo) {
      this.$router.replace("/foundation/wap/login")
      return
    }
    this.getDetail()
    this.getContact()
  },
  computed: {
    ...mapState(["lang", "userInfo"])
  },

  methods: {
    ...mapMutations(["isShowLogin"]),
    // 国际化
    getContact () {
      if (this.lang == "en") {
        this.contactUs = "https://www.covestro.com/en/contact"
        this.visitWebsite = "https://www.covestro.com/EN"
        this.sampleApplication =
          "https://solutions.covestro.com/en/account/register"
      } else {
        this.contactUs = "https://www.covestro.com/zh-cn/contact"
        this.visitWebsite = "https://www.covestro.com/zh-cn/"
        this.sampleApplication =
          "https://solutions.covestro.com/zh/account/register"
      }
    },
    // 点击收藏
    async save () {
      this.favourite = !this.favourite
      let res = await api.favourite(this.detailData.id, this.favourite)
    },
    // 获取详情
    async getDetail () {
      const loading = this.$loading()
      try {
        let res = await api.getProductDetail(this.$route.params.id, this.lang)
        this.detailData = res.data
        loading.close()
      } catch (err) {
        loading.close()
      }

      this.favourite = this.detailData.isFavourte ? true : false
    },
    // 返回
    goBack () {
      this.$router.back(-1)
    }
  },

  watch: {}
};
</script>

<style lang="scss" scoped>
.prod-detail {
  .goBack {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 20px;
    color: #fff;
  }
  img {
    display: block;
    width: 100%;
    height: auto;
  }

  .prod-detail-cont {
    color: #828aa1;
    padding: 27px 27px 85px;
    background: #fff;

    .title {
      color: #3b4664;
      font-size: 18px;
      line-height: 26px;
      margin-bottom: 10px;
    }

    .cont {
      color: #828aa1;
      font-size: 14px;
      line-height: 26px;
      width: 100%;
      // word-wrap: break-word;
      // word-break: break-all;
      overflow: hidden;
      img {
        width: 100%;
        height: auto;
      }
    }

    .description {
    }
    .features {
      padding: 20px 0;
      margin: 20px 0;
      border-top: 1px solid #eeeef2;
      border-bottom: 1px solid #eeeef2;

      i {
        color: #fb4f50;
      }
    }

    .documentation {
      .cont {
        color: #545dff;
        line-height: 30px;

        i {
          color: #fb4f50;
          font-size: 18px;
        }
      }
    }
  }

  .prod-detail-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 55px;
    background: #ffffff;
    box-shadow: 0px 0px 4px #eeeef1;
    .inner {
      padding: 0;
      display: flex;
      justify-content: space-around;
      a {
        line-height: 55px;
        font-size: 14px;
        margin-right: 5px;
        text-align: center;
      }
      a:first-of-type {
        img {
          width: 30px;
        }
      }
      img {
        width: 20px;
        vertical-align: middle;
        margin-right: 5px;
        display: inline-block;
      }
      .rightBtns {
        text-align: right;
        line-height: 55px;
        .el-button {
          display: inline-block;
          padding: 12px 18px;
          background-image: linear-gradient(to right, #ff7f41, #e6007e);
          color: #fff;
          border: 0;
        }
      }
    }
  }
}
</style>
